<template>
	<view class="dic-value-list">
		<view class="dic-value-li" v-for="(d,index) in Data.list">
			<view class="li-content">
				<view class="dic-value-li-key">
					{{d.value}}
				</view>
				<view class="dic-value-li-value">
					{{d.label}}
				</view>
			</view>
			<view class="li-options">
				<view class="li-options-li">
					编辑
				</view>
				<view class="li-options-li">
					删除
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		onReady,
	} from '@dcloudio/uni-app'

	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const Data = reactive({
		Dic: null,
		page: 1,
		pages: null,
		limit: 10,
		list: [],
		total: null
	})
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		let query = instance.options
		let {
			id,
			title
		} = query
		Data.Dic = id
		// 动态设置标题
		uni.setNavigationBarTitle({
			title
		})
		let page = Data.page
		let limit = Data.limit
		let url = `/dictionary/dictionaryValueList`
		overallRequest(url, {
			data: {
				id,
				page,
				limit
			}
		}).then(res => {
			let {
				data
			} = res
			let {
				list,
				page,
				pages,
				limit,
				total
			} = data
			Data.list.push(...list)
			Data.page = page
			Data.pages = pages
			Data.limit = limit
			Data.total = total
		})

	})
</script>

<style>
	.dic-value-list {
		display: flex;
		flex-direction: column;
		padding: 25rpx 5%;
		padding-top: 40rpx;
		gap: 10px;
		font-size: 25rpx;
	}

	.dic-value-li {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border: 1rpx solid #c3c3c344;
		height: 40px;
		padding-right: 15px;
	}
	.dic-value-li-key {
		height: 100%;
		width: 30%;
		display: flex;
		align-items: center;
		text-indent: 20px;
		font-weight: bold;
		
	}
	.dic-value-li-value {
		height: 100%;
		flex: 1;
		border-bottom-left-radius: 30px;
		background: white;
		border-top-left-radius: 30px;
		margin-left: -30px;
		padding-left: 30px;
		display: flex;
		align-items: center;
	}

	.li-content {
		flex: 1;
		display: flex;height: 100%;
	}

	.li-options {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.li-options-li {}

	.li-content-value {
		color: blue;
		font-weight: bold;
		margin-right: 30rpx;
	}
</style>